<template>
  <div class="habit">

    <div>
      <div v-for="(item,index) in cartList">
        <van-card
          num="2"
          price="2.00"
          :desc="item.content"
          :title="item.title"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="">编辑</van-button>
            <van-button size="mini" @click="delCard(item.id)">删除</van-button>
          </template>
        </van-card>
      </div>
    </div>



  </div>
</template>

<script>
import {request} from "../network/request";

export default {
  name: 'Habit',
  data () {
    return {
      cartList:[],
      msg: 'Welcome to Your Vue.js App',
      habitName: '',
      tel:'',
      text: '',
      digit: '',
      number: '',
      password: '',
    }
  },
  created() {
    this.getCartList();
  },
  methods:{
    //删除卡片
    delCard(str){
      //card
      request({
        url:'/card/delCard/'+str,
        method: 'get',
      }).then(res=>{
        console.log(res);
        this.getCartList();
      }).catch(err=>{
        console.log(err)
      })
    },

    //获取卡片列表
    getCartList(){
      request({
        url:'/card/getcardpage',
        method: 'post',
      }).then(res=>{
        console.log(res);
        this.cartList=res.data;
      }).catch(err=>{
        console.log(err)
      })
    },

    submit(){
      request({
        url: '/habit/addHabit',
        method:'post',
        data: { habitName: this.habitName},
      }).then(res => {
        console.log(res);

      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.habit{
  margin-bottom: 49px;
}
</style>
